<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>树形组件</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test1" lay-filter="test1"></div>
		  <script>
		  layui.use(['tree','jquery','form'], function(){
		    var tree = layui.tree;
				var $ = layui.jquery;
				var form = layui.form;
				$.post(
					'http://stuapi.ysd3g.com/api/GetAllModuleLayUI',
					{
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
					},
					function(res){
						//渲染
						var inst1 = tree.render({
						  elem: '#test1'  //绑定元素
							,id:'demo1'
							,edit:['add', 'update', 'del']
						  ,data: res
							,operate: function(obj){
							    var type = obj.type; //得到操作类型：add、edit、del
							    var data = obj.data; //得到当前节点的数据
							    var elem = obj.elem; //得到当前节点元素
							    
							    //Ajax 操作
							    var id = data.id; //得到节点索引
							    if(type === 'add'){ //增加节点
										//给添加节点表单parentId赋值
										$('#parentId').val(id);
										layer.open({
										  type: 1,
										  title:'添加节点',
										  area:['500px','460px'],
										  content: $('#test2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
										});
							      //返回 key 值
							      //return 123;
							    } else if(type === 'update'){ //修改节点
										//获取当前节点的parentId
										$.post(
											'http://stuapi.ysd3g.com/api/GetModuleById',
											{
												id:id,
												token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
											},function(res){
												console.log(JSON.parse(res.message).parentId);
												$('#parentId2').val(JSON.parse(res.message).parentId);
											},'json'
										);
										//表单初始赋值
										//console.log(data)
										form.val("ff2", {
											"mId": id // "name": "value"
											,"name": data.title
											,"path": data.href
										});
										layer.open({
										  type: 1,
										  title:'修改节点',
										  area:['500px','460px'],
										  content: $('#test3') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
										});
							      //console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
							    } else if(type === 'del'){ //删除节点
							      $.post(
											'http://stuapi.ysd3g.com/api/DeleteModule',
											{
												mId:id,
												token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
											},function(res){
												layer.msg(''+res.success);
											},'json'
										);
							    };
							  }
						});
					},'json'
				);
		    
		  });
		  </script>
	</body>
	<!--添加节点  -->
	<div id="test2" style="display: none;">
		<form id="ff" class="layui-form" action="" lay-filter="ff">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<input id="parentId" type="hidden" name="parentId"  />
			<div class="layui-form-item">
				<label class="layui-form-label">模块名称</label>
				<div class="layui-input-inline">
					<input type="text" name="name"  placeholder="请输入模块名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块权重</label>
				<div class="layui-input-inline">
					<input type="text" name="weight" placeholder="请输入权重" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script>
			//Demo
			layui.use(['form','jquery','tree'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var tree = layui.tree;
				//监听提交
				form.on('submit(add)', function(data) {
					$.post(
						'http://stuapi.ysd3g.com/api/CreateModule',
						data.field,
						function(res){
							//刷新页面
							location.reload();
						},'json'
					);
					return false;
				});
			});
		</script>
	</div>
	
	<!--修改节点  -->
	<div id="test3" style="display: none;">
		<form id="ff2" class="layui-form" action="" lay-filter="ff2">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<input id="mId" type="hidden" name="mId"  />
			<input id="parentId2" type="hidden" name="parentId"  />
			<div class="layui-form-item">
				<label class="layui-form-label">模块名称</label>
				<div class="layui-input-inline">
					<input type="text" name="name"  placeholder="请输入模块名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块权重</label>
				<div class="layui-input-inline">
					<input type="text" name="weight" placeholder="请输入权重" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script>
			//Demo
			layui.use(['form','jquery','tree'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var tree = layui.tree;
				//监听提交
				form.on('submit(edit)', function(data) {
					$.post(
						'http://stuapi.ysd3g.com/api/UpdateModule',
						data.field,
						function(res){
							//刷新页面
							location.reload();
						},'json'
					);
					return false;
				});
			});
		</script>
	</div>
</html>
